<template>
	<!-- <image src="/static/bg.png" alt="" class="bg" /> -->
	<van-empty description="暂无相关" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" v-if="list.length==0"/>
	<scroll-view scroll-y="true" @scrolltolower="lowerBottom" v-else>
		<div class="mesList" v-for="(item, index) in list" :key="item.userid">
			<div class="mes-card" @click="showdetail(item.mesid)">
				<div class="card-top">
					<div
						style="display: flex;width:100%; align-items: center;justify-content: end;padding-right: 10px;padding-left: 10px;">
						<div class="tags">
							<view style="margin-left: 10px;" class="cu-tag round bg-orange light ">{{ item.types }}
							</view>
						</div>
					</div>
				</div>
				<div style="padding-left: 5px;padding-right: 5px;" class="card-body px-2">
					<van-image v-if="item.imgList[0]" width="100%" height="15rem" fit="cover" position="center"
						:src='item.imgList[0]' />
					<div style="font-size: 20px; color: #212121; font-weight: 600; padding-top: {{item.imgList[0] ? '20px' : '0px'}};" class="title">
					  {{ item.title }}
					</div>
		
					<view style="padding-top: 10px;" class="content">
						{{ item.content }}
					</view>
				</div>
		
				<div class="card-bottom">
					<div style="display: flex; align-items: center; padding-right: 10px;" class="user-info">
						<van-image round width="2rem" height="2rem" :src='item.img' />
						<span style="margin-left: 5px;">{{ item.Username }}</span>
					</div>
					<view style="color: #9a9a9a;" class="time">
						{{ item.time.substring(0, 10) }}
					</view>
				</div>
			</div>
		</div>
	</scroll-view>
</template>

<script>
	import { showAllpost } from '@/store/api.js'
	import {
		truncateString
	} from '@/store/constants.js'
	export default {
		data() {
			return {
				total:0,
				page:1,
				// switchTime1: '请选择时间',
				// value1: -1,
				head: '',
				list: [],
				id:0,
			// 	option1: [
			// 	{
			// 		text: '00:00-04:00',
			// 		value: 0
			// 	},
			// 	{
			// 		text: '04:00-08:00',
			// 		value: 1
			// 	},
			// 	{
			// 		text: '08:00-12:00',
			// 		value: 2
			// 	},
			// 	{
			// 		text: '12:00-16:00',
			// 		value: 3
			// 	},
			// 	{
			// 		text: '16:00-20:00',
			// 		value: 4
			// 	},
			// 	{
			// 		text: '20:00-24:00',
			// 		value: 5
			// 	},
			// ],
			// 查询的起始时间
			// begintimeQ:'',
			// 查询的结束时间
			// endtimeQ:''
			};
		},
		mounted() {
			//获取页面的帖子
			let data={
				pageNum: '1',
				pageSize: '20',
				tagId: this.id
			}
			showAllpost(data).then(res => {
				this.page++
				this.total=res.data.data.total
				console.log(res)
				res.data.data.rows.forEach(item=>{
					let types = ''
					item.tags.forEach(it => {
						types = types + '#' + it.name
					})
					this.list.push({
						img:item.posterAvatar,
						title:item.title,
						content: truncateString(item.content),
						imgList:this.processString(item.content).images,
						userid:item.posterId,
						mesid:item.id,
						time: item.beginTime,
						types: types
					})
					
				})
				console.log(this.list)
			})
			
		},
		onLoad(value) {
			// 更换头部标题
			let item = JSON.parse(value.param)
			console.log(item)
			this.head = item.name
			this.id = item.id
			uni.setNavigationBarTitle({
				title: item.name
			});
		},
		methods:{
			processString(inputString) {
				const parts = inputString.split('**/img/**');
			
				// 获取文本部分和图片 URL 部分
				const textPart = parts[0];
				const imageUrls = parts[1] ? parts[1].split(',') : [];
			
				// 将图片 URL 部分存储为数组
				const imagesArray = imageUrls.map(url => url.trim());
			
				const part2=textPart.trim().split('**/rank/**')
				
				let newtext=part2[0]
				// let rankpart=part2[1]?JSON.parse(part2[1]):''
				// 返回处理后的结果，图片部分作为数组返回
				return {
					// rank:rankpart,//评分部分
					text: newtext.trim(), // 去除文本部分两端的空格
					images: imagesArray // 图片 URL 部分作为数组返回
				};
			
			},
			lowerBottom(){
				let data={
					pageNum: this.page,
					pageSize: '20',
					tagId: this.id
				}
				showAllpost(data).then(res => {
					this.page++
					console.log(res)
					res.data.data.rows.forEach(item=>{
						this.list.push({
							img:item.posterAvatar,
							title:item.title,
							content: truncateString(item.content),
							userid:item.posterId,
							mesid:item.id,
							time: item.beginTime,
						})
					})
				})
			},
			showdetail(mesid){
				uni.navigateTo({
					url:`/subpkg/mes_detail/mes_detail?id=${mesid}`
				})
			},
			// switchTime(i){
			// 	this.switchTime1 = this.option1[i.detail].text
			// 	this.begintimeQ = this.switchTime1.substring(0,5)
			// 	this.endtimeQ = this.switchTime1.substring(6,11)
			// 	let data = {
			// 		pageNum: '1',
			// 		pageSize: '100',
			// 		beginTime: '2024-03-07T'+this.begintimeQ+':00.000+00:00',
			// 		endTime: '2024-03-07T'+this.endtimeQ+':00.000+00:00',
			// 		tagId: this.id
			// 	}
			// 	showAllpost(data).then( (res) => {
			// 		console.log(res)
			// 		this.list = []
			// 		res.data.data.rows.forEach(item=>{
			// 			this.list.push({
			// 				img:item.posterAvatar,
			// 				title:item.title,
			// 				content: item.content,
			// 				userid:item.posterId,
			// 				mesid:item.id
			// 			})
			// 		})
			// 	})
			// }
		}
	}
</script>

<style lang="less">
.card-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 10px;
		padding-bottom: 10px;

	}

	.mes-card {
		overflow: hidden;
		position: relative;
		text-align: left;
		border-radius: 0.5rem;
		background-color: #fff;
		width: 100%;
		box-shadow: 7px 7px 14px #d0d0d0,
			-7px -7px 14px #f0f0f0;
	}

	.card-bottom {
		padding: 10px;
		align-items: center;


		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.time {}

	.mesList {
		padding: 10px;
		padding-left: 5px;
		padding-right: 10px;
		display: flex;

		justify-content: center;
	}

	.right {
		color: aqua;
	}

	.switch-sex::after {
		content: "全部";
		font-size: 10px;
		/* 设置内容的大小 */
		color: blue;
		/* 设置内容的颜色 */
	}

	.switch-sex::before {
		content: "推荐";
		font-size: 10px;
		/* 设置内容的大小 */
		color: blue;
		/* 设置内容的颜色 */
	}

	.showImg {
		margin-top: 2vh;
		max-width: 25vw;
		// height: 20vw;
		// max-height: auto;
		margin-right: 1vh;
		margin-bottom: 2vh;
	}

	.timeAndType {
		display: flex;
		font-size: 10px;
		justify-content: flex-end;
		align-items: center;
		margin-right: 2vw;
	}

	.time {
		margin-right: 4vw;
	}

	.meslist {
		position: relative;
		z-index: 1;
		// margin-block-start: 20rpx;
		padding: 18rpx;
	}

	/* 单个卡片 */
	.mes {
		padding-bottom: 5px;
		z-index: 5;
		display: flex;
		margin-top: 2rpx;
		border-radius: 10rpx;
		padding-top: 2vh;
		box-shadow: 3px 3px 5px 3px #888888;
		background-color: #fefefe;
		margin-left: 5rpx;
		margin-right: 5rpx;
	}

	.headimg {
		width: 225rpx;
		height: 100rpx;
		border-radius: 75%;
		margin-left: 15rpx;
	}

	.content {
		width: 580rpx;
		font-size: 25rpx;
		-webkit-line-clamp: 2;
		margin-left: 15rpx;
	}

	.title {
		font-weight: 700;
		font-size: 30rpx;
		margin-left: 15rpx;
	}

	.bg {
		width: 100%;
		height: 74%;
		z-index: 0;
		position: absolute;
	}
</style>